<template>
    <div style="margin-left: 20px">
        <el-table
                :data="tableData"
                style="width: 100%; border-radius: 0px 20px 0px 0px;">
            <el-table-column
                    prop="policy"
                    label="保单"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="insurant"
                    label="受保人"
                    width="170">
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="单价"
                    sortable
                    width="178">
            </el-table-column>
            <el-table-column
                    prop="term"
                    label="保障期限"
                    width="270">
            </el-table-column>
            <el-table-column
                    prop="tag"
                    label="保障状态"
                    width="90"
                    :filters="[{ text: '保障中', value: '保障中' }, { text: '待支付', value: '待支付' }, { text: '待生效', value: '待生效' }, { text: '已失效', value: '已失效' }]"
                    :filter-method="filterTag"
                    filter-placement="bottom-end">
                <template slot-scope="scope">
                    <el-tag
                            :type="scope.row.tag === '保障中' ? 'success' : 'warning'"
                            close-transition>{{scope.row.tag}}</el-tag>
                </template>
            </el-table-column>

        </el-table>
    </div>


</template>

<script>
    export default {
        data() {
            return {
                tableData: [{
                    policy: '意外险',
                    insurant: 'A',
                    price: 1000,
                    term: '2016/05/02-2021/05/02',
                    tag: '保障中'
                }, {
                    policy: '重疾险',
                    insurant: 'B',
                    price: 2000,
                    term: '2017/05/02-2022/05/02',
                    tag: '待支付'
                }, {
                    policy: '养老保险',
                    insurant: 'C',
                    price: 1500,
                    term: '2018/05/02-2023/05/02',
                    tag: '待生效'
                }, {
                    policy: '家庭支柱',
                    insurant: 'D',
                    price: 500,
                    term: '2019/05/02-2024/05/02',
                    tag: '已失效'
                }]
            }
        },
        methods: {
            filterTag(value, row) {
                return row.tag === value;
            }
        }
    }
</script>

<style scoped>
    /*.el-table {*/
    /*    color: #333;*/
    /*    line-height: 60px;*/
    /*}*/
</style>